<template>
	<view>
		<!-- 阶段 0 未提交  1 已提交  2  已付款  3 审核未通过  4 被清除  5 审核已通过  6 被取消 -->
        <view class="maintop">
			<view class="title"><text class="name">{{base.signInfo[0]?.cptName}}</text>
			<text class="titleTag titleTag01" v-if="base.signInfo[0]?.cptSignType=='0'">个人报项</text>
			<text class="titleTag titleTag02" v-if="base.signInfo[0]?.cptSignType=='1'">参赛队报项</text>
			<text class="titleTag titleTag03" v-if="base.signInfo[0]?.cptSignType=='2'">参赛队-队伍报项</text>
			</view>
			<view class="flexCenter redText">审核状态：
			 <text v-if="base.signInfo[0]?.stage=='0'">未提交</text>
			 <text  v-if="base.signInfo[0]?.stage=='1'">已提交</text>
			 <text  v-else-if="base.signInfo[0]?.stage=='5'">审核通过</text>
			 <text v-else-if="base.signInfo[0]?.stage=='2'">审核中</text>
			 <text  v-else-if="base.signInfo[0]?.stage=='3'">审核拒绝</text>
			</view>
			<view class="flexCenter bgText">比赛时间：{{base.signInfo[0]?.cptBeginTime?.substring(0, 10)}} ~
					{{base.signInfo[0]?.cptEndTime?.substring(0, 10)}}</view>
					<view class="leftLineBox">
					   <view class="leftLine">报项分类</view>	
			</view>
			<view class="segmented flexStart">
				<view :class="current==0?'view active':'view'" @click="current=0">
					运动员
				</view>
				<view :class="current==1?'view active':'view'" @click="current=1">
					其他赛事人员
				</view>
			</view>
		   
		</view>
		<!-- <view class="wBox" v-for="(t,index) in list" :key="index"> -->
<!-- 			<uni-list :border='false'>
				<uni-list-item :border="false" title="姓名">
					<template v-slot:footer>
						{{t.personInfo?.realName}}
						<text style="font-size: 24rpx;" v-if="t.personInfo?.sex==0">(女)</text>
						<text style="font-size: 24rpx;" v-if="t.personInfo?.sex==1">(男)</text>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" :title="t.personInfo.idcTypeStr" :rightText="t.personInfo.idcCode" />
				<uni-list-item :border="false" v-if="t.signInfo[0]?.coachNames" title="教练" :rightText="t.signInfo[0]?.coachNames" />
				<uni-list-item :border="false" v-if="t.signInfo[0]?.leaderNames" title="领队" :rightText="t.signInfo[0]?.leaderNames" />
				<view v-if="t.extraformData">
					<uni-list-item :border="false" v-show="ee.value" :title="ee.name"
						v-for="(ee,index) in t.extraformData" :key="index">
						<template v-slot:footer>
							<text v-if="ee.type=='0'||ee.type=='1'||ee.type=='4'"
								style="font-size: 24rpx;">{{ee.value}}</text>
							<image v-if="ee.type=='3'&&ee.value!=null" :src="
							ee.value?.url" mode='aspectFit'
								style="width: 200rpx;height: 200rpx;" />
							<view @click="goWebView(ee.value.url)" v-if="ee.type=='2'">
								<uni-icons type="download" size="16"></uni-icons>
								{{ee.value?.name}}
							</view>
						</template>
					</uni-list-item>
				</view>
				<uni-list-item :border="false" :title="'报名项目'+ (index+1)" v-for="(s,index) in t.signInfo" :key="index">
					<template v-slot:footer>
						<text style="font-size: 26rpx;max-width: 60vw;display: inline-block;">{{s.cptProjectName}}
							{{s.cptGroupName}}{{s.cptLevelName}} {{s.cptSonLevelName}} {{s.zu}}</text>
					</template>
				</uni-list-item>
			</uni-list> -->
<!-- 	</view> -->
          <block  v-if="current === 0">
		    <view class="listBox"  v-for="(s, index) in list" :key="s.id">
		    	<view class="indexBox"><text>{{index+1}}</text></view>
		    	<view class="top">
		    		<view class="flexStart">
		    			<image :src="s.personInfo.picUrl"></image>
						<view>
							 <view>{{s.personInfo.realName}}
							 	<text v-if="s.personInfo.sex==0">(女)</text>
							 	<text v-else>(男)</text>
							 </view>
							 <view class="color01">身份证:{{s.personInfo.idcCode}}</view>
						</view>
		    			
		    		</view>
		    	</view>
			
		    	<view  v-for="(p,index) in s.signInfo" :key="p.id">
		    		<view  class="flexBetween mt-15">
		    			<view class="flex baoxianLeft">
		    				<i class="bx">报项</i>
		    				{{p.cptProjectName}}&ensp;{{p.cptGroupName}}{{p.cptLevelName}}{{p.cptSonLevelName}} 
		    				<text style="color: #999;">{{p.zu}}</text>
		    			</view>
		    		</view>
		    	</view>
		    </view>
         </block> 
			<view v-else class="other">
				<view >
					<view ><uni-tag class="mr10" text="教练" type="success" :circle="true"></uni-tag>{{list[0].signInfo[0]?.coachNames}}</view>
					<view class="mt-15" v-if="list[0].signInfo[0]?.leaderNames"><uni-tag class="mr10" text="领队" type="warning" :circle="true"></uni-tag>{{list[0].signInfo[0]?.leaderNames}}</view>
				</view>
			</view>
		<view style="height:210rpx"></view>
		<view class="bottom">
			<button class="btn btn1" style="margin: 0 10px;" v-if="auditStatus!='0'" @click="download">下载凭证</button>
			
			<button style="margin: 0 10px;" v-if="(auditStatus=='0'&&payStatus=='0')||auditStatus=='3'||auditStatus=='4'"
				@click="goConti" class="btn btn1">继续报名</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';
	import * as match from '@/common/match.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const data = reactive({
		list: {},
		signId: '',
		memberList: [],
		isSign: false,
		showForm: false,
		auditStatus: '',
		payStatus: '',
		base: {},
		current:0
	});
	const {
		list,
		signId,
		memberList,
		isSign,
		showForm,
		payStatus,
		auditStatus,
		base,
		current
	} = toRefs(data)
	let groupId
	onLoad((option) => {
		console.log('signdetail',option)
		signId.value = option.id
		groupId = option.groupId
		auditStatus.value = option.auditStatus
		payStatus.value = option.payStatus
		getData()
	})
	function getData() {
		match.getMySignListFromBaoXiang({
			cptId: signId.value,
			groupId: groupId
		}).then(res => {
			list.value = res.data
			for (const p of list.value) {
				if (p.extraPeronInfo?.personInfo) {
					p.extraformData = JSON.parse(p.extraPeronInfo.personInfo) || [];
				}
			}
			base.value = list.value[0]
		})
	}

	function goConti() {
		if (base.value.signInfo[0].cptSignType == '0') {
			uni.navigateTo({
				url: `/pages_match/match/choose_project?matchId=${signId.value}`
			});
		} else if (base.value.signInfo[0].cptSignType == '1') {
			uni.navigateTo({
				url: `/pages_match/match/choose_sportman?matchId=${signId.value}&groupId=${groupId}&signType=${base.value.signInfo[0].cptSignType}`
			});
		} else {
			uni.navigateTo({
				url: `/pages_match/match/add_rank?matchId=${signId.value}&groupId=${groupId}&signType=${base.value.signInfo[0].cptSignType}`
			});
		}

	}
function download(){
	match.downloadpz(signId.value,groupId).then(res=>{
		goWebView(res.data)
	})
}

	function goWebView(url) {
		url = url.replace("http://", "https://")
		uni.showLoading({
			title: '下载中'
		});
		uni.downloadFile({
			url: url,
			success: function(res) {
				uni.hideLoading();
				var filePath = res.tempFilePath;
				uni.showLoading({
					title: '正在打开'
				});
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						uni.hideLoading();
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			fail: function(error) {
				uni.hideLoading();
				uni.showToast({
					title: `下载失败`,
					icon: 'none',
					duration: 2000
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	.poKxBtn {
		position: absolute;
		top: -70rpx;
		right: 0;
		font-size: 24rpx;
		line-height: 2;
	}

	:deep(.uni-group__content) {
		padding: 0;
	}

	.addBtn {
		width: 700rpx;
		height: 90rpx;
		background: #ffffff;
		border: 1rpx solid #d43e3e;
		color: #d43e3e;
		font-size: 30rpx;
		border-radius: 15rpx;
	}

	.wBox {
		position: relative;
		background: #ffffff;
		border-radius: 15px;
		box-sizing: border-box;
		width: 700rpx;
		margin: 30rpx auto;
		padding: 30rpx;

		:deep(.uni-list-item__container) {
			padding: 10rpx 0 !important;
			padding-left: 0 !important;
		}

		:deep(.uni-list-item__extra-text) {
			font-size: 28rpx;
			color: #2B3133;
			text-align: right;
		}

		:deep(.uni-list-item__content-title) {
			font-size: 28rpx;
			color: #7B7F83;
		}

		.title {
			font-weight: 500;
			color: #000000;
			font-size: 32rpx;
			line-height: 1.6;
			margin: 0 0 20rpx;
		}

		.time {
			font-size: 24rpx;
			color: #7B7F83;
			margin: 0 20rpx;
		}
	}

	:deep(.uni-list-item__extra) {
		width: 60%;
	}

	.avatarUrl {
		width: 200rpx;
		height: 200rpx;
	}

	.avatarUrl button {
		padding: 0;
		display: block;
		line-height: 1;
	}

	.refreshIcon {
		width: 200rpx;
		height: 200rpx;
	}

	.rank-image {
		width: 90rpx;
		height: 90rpx;
		background: #f8f8f8;
		border-radius: 50%;
	}

	.statusPo {
		position: absolute;
		right: 0;
		top: -15rpx;
		color: #fff;

		.status {
			font-size: 30rpx;
			padding: 6rpx 20rpx;
			border-radius: 0 6rpx 0 6rpx;
		}
	}

	.fileName {
		font-size: 28rpx;
		text-align: right;
		color: #54e1b9;
		white-space: nowrap;
		width: 50vw;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
	}
	.maintop{
		width:100%;
		box-sizing: border-box;
		padding:30rpx 0 0 0;
		background:#fff;
		view{
			box-sizing: border-box;
		}
	    .title{
			position:relative;
			font-weight: bold;
			font-size:17px;
			text-align: center;
		.name{
			display: inline-block;
			max-width:50%;
		}
		.titleTag{
			position:absolute;
			margin-left:20rpx;
			color:#fff;
			font-weight: normal;
			font-size:14px;
			padding:5rpx 10rpx;
			border-radius:20rpx;
			border-bottom-left-radius: 0;
		}
			.titleTag01{
				background:$uni-color-primary;
			}
			.titleTag02{
				background:#41aedd;
			}
			.titleTag03{
				background:$uni-color-warning;
			}
		}
	   .redText{
		   color:red;
		   padding:30rpx;
		   font-weight: bold;
	   }
	   .bgText{
		   box-sizing: border-box;
		   background:$uni-color-primary;
		   color:#fff;
		   padding:20rpx ;
	   }
	   .leftLineBox{
		   padding:30rpx;
	   }
	}
	.listBox{
		box-sizing: border-box;
		width:calc( 100% - 60rpx);
		margin:30rpx 30rpx 0 30rpx;
		background:#fff;
		position: relative;
		border:1px solid $uni-color-primary;
		border-radius:15px;
		overflow: hidden;
		// margin-top:30rpx;
		padding:30rpx;
		.top{
			display:flex;
			justify-content: space-between;
			align-items: center;
			image{
				width:80rpx;
				height:80rpx;
				border-radius:50%;
				margin-right:20rpx;
				margin-left:30rpx;
			}
		}
		.indexBox{
			position:absolute;
			top:-60rpx;
			left:-60rpx;
			display: block;
			background-color: $uni-color-primary;
			color:#fff;
			width:120rpx;
			height:120rpx;
			border-radius: 35%;
			font-size:14px;
	       text{
			   
			   position:absolute;
			   top:70rpx;
			   left:75rpx;
		   }
		}
	    .baoxianLeft{
			width:65%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			.bx{
				padding:0 5rpx;
				background:#fff5da;
				color:#ffac30;
				margin-right:10rpx;
			}
		}
		:deep(.uv-button--square){
			border-radius:20rpx;
		}
		:deep(.uv-button--small){
			min-width:40px;
			padding:0!important;
			height:25px;
		}
		:deep(.uv-button-wrapper){
			margin-left:5px;
		}
	}
	.segmented{
			box-sizing: border-box;
		padding-left:32rpx;
	
		.view{
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			padding:15rpx 40rpx;
		}
		.active{
			background:$uni-color-primary;
			color:#fff;
			
		}
	}
	.other{
		
		padding:32rpx;
		view{
			border-radius: 30rpx;
			background:#fff;
			padding:20rpx;
			border:1px solid #d43e3e;
		}
	}
	.bottom{
		width:100%;
		display: flex;
		justify-content: center;
		padding: 60rpx 0;
		background:#fff;
		position:fixed;
		bottom:0;
		left:0;
	}
</style>